<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>图片裁剪</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #imgWrapper {
      position: relative;
      min-height: 420px;
      background: #F1F1F1;
      cursor: pointer;
      text-align: center;
      line-height: 0;
    }
    #imgWrapper:after {
      display: inline-block;
      content: '+ 点选择图片';
      margin-top: 100px;
      width: 80%;
      max-width: 600px;
      line-height: 200px;
      color: #999;
      border: 1px dashed #ccc;
      border-radius: 10px;
    }
    #imgWrapper.hide:after {
      display: none;
    }
    #imgWrapper .view-wrapper {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      background: #F1F1F1;
    }
    .view-wrapper img {
      width: 100%;
    }
    
    .zx-image-crop-container .zx-crop-btns-wrapper{
		margin-top: -14px;
    }
    
  </style>
</head>
<body>
<div>
  <div id="imgWrapper">
    <div class="view-wrapper">
      <!--图片预览容器-->
      <img src="" style="display: none">
    </div>
  </div>
</div>
<script type="text/javascript" src="__PUBLIC__/qwadmin/js/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js"></script>
<script src="__PUBLIC__/qwadmin/js/image-process-tools.min.js"></script>
<script>
  var imgWrapper = document.querySelector('#imgWrapper')
  var img = imgWrapper.querySelector('img')
  // var $xxxxx = document.getElementById('xxxxx')
  // 初始化图片预处理工具
  var zxImageProcess = new ZxImageProcess({
    // 触发文件选择的元素
    selector: '#imgWrapper',
    // 限制宽度缩放，则只需设置width值
    // 限制高度缩放，则只需设置height值
    // 同时设置了width、height值，则会对图片按尺寸裁剪
    width: 750,
    height: 430,
    submitText: '确定',
    rotateText: '旋转 90°',
    success: function (result) {
      // 返回数据
      // 添加图片至目标容器
      img.src = result.base64;
      img.style.display = '';
      imgWrapper.className += ' hide';
      //保存服务器	
      saveImg(result.base64);
    },
    error: function (err) {
      console.error(err);
      if (err.code === 9 || err.code === 22) return
      alert(err.msg);
    }
  })

  log(zxImageProcess)

  // log
  function log () {
    console.log.apply(null, arguments);
  }

  function logStr (o) {
    log(JSON.stringify(o, null, 2))
  }
  
  function saveImg(imgBase64){
	  $.post(
		"{:U('Upload/saveBase64Image')}",
		{base64_image_content:imgBase64},
		function(res){
			if(res.code == 0){
				$('#{$BackCall}',parent.document).val(res.url);
			}
		},"json"
	  );
  }
  
  
  $(function(){
	  var val = $('#{$BackCall}',parent.document).val();
	  if(val != ''){
		  $(".view-wrapper img").attr("src",val);
		  $(".view-wrapper img").show();
	  }
  });
</script>
</body>
</html>
